import './style.less'

import { observer } from 'mobx-react-lite'

import { useStore } from '@/store'
import PowerOn from '@/transitions/PowerOn'

import SigninPage from './SigninPage'
import TimePage from './TimePage'

const LockScreen = () => {
  const { interactive } = useStore()

  console.log(`${interactive.signVisible}`)

  return (
    <div className="lock-screen">
      <PowerOn keyIndex={interactive.signVisible}>
        {interactive.signVisible ? <SigninPage /> : <TimePage />}
      </PowerOn>
      {/* <div className="icons">
        <Icon url="/src/assets/img/icon/ui/wifi.png" size={16} />
        <Icon>
          <svg
            xmlns="http://www.w3.org/2000/svg"
            height="20"
            width="20"
            fill="none"
            viewBox="0 0 24 24"
          >
            <path
              xmlns="http://www.w3.org/2000/svg"
              fill="#000"
              d="M17 6a3 3 0 0 1 3 3v1h1a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1h-1v1a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V9a3 3 0 0 1 3-3h12Zm-.002 1.5H5a1.5 1.5 0 0 0-1.493 1.356L3.5 9v6a1.5 1.5 0 0 0 1.355 1.493L5 16.5h11.998a1.5 1.5 0 0 0 1.493-1.355l.007-.145V9a1.5 1.5 0 0 0-1.355-1.493l-.145-.007Z"
            ></path>
          </svg>
        </Icon>
      </div> */}
    </div>
  )
}

export default observer(LockScreen)
